import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  SlotsType,
  toRefs,
  watch
} from 'vue'

import { useMainStore } from '@/store'

import { helloWorldTSXProps } from './HelloWorldTSX.constant'
import render from './HelloWorldTSX.render'

export default defineComponent({
  name: 'HelloWorldTSX',
  props: helloWorldTSXProps(),
  emits: {
    /**
     * 组件加载事件
     * @param {string} msg 消息
     */
    mounted: (msg: string) => true
  },
  slots: Object as SlotsType<{
    /**
     * 自定义额外内容
     */
    extra: () => any
  }>,
  setup(props, { emit }) {
    const state = reactive({
      count: 0
    })

    const mainStore = useMainStore()

    const contentComputed = computed(() => mainStore.content)

    function handleCount() {
      state.count++
    }

    function clear() {
      state.count = 0
    }

    watch(
      () => state.count,
      (newValue, oldValue) => {
        console.log('count: ', newValue)
      },
      {
        deep: false,
        immediate: false
      }
    )

    onMounted(() => {
      emit('mounted', 'Mounted: HelloWordTSX')
    })

    return {
      ...toRefs(state),
      contentComputed,
      handleCount,
      clear
    }
  },
  render
})
